<template>
  <div>
    <Overview/>
    <el-row :gutter="16">
      <el-col :lg="24" :xl="18" class="recent-situation-warp">
        <RecentSituation/>
      </el-col>
      <el-col :lg="24" :xl="6">
        <el-row :gutter="16">
          <el-col :sm="12" :xl="24" :xs="24" class="online-access-warp">
            <OnlineAccess/>
          </el-col>
          <el-col :sm="12" :xl="24" :xs="24" class="active-user-warp">
            <ActiveUser/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="16">
      <el-col :sm="24" :xl="12" :xs="24" class="category-ratio-warp">
        <CategoryRatio/>
      </el-col>
      <el-col :sm="12" :xl="6" :xs="24" class="feedback-data-warp">
        <FeedbackData/>
      </el-col>
      <el-col :sm="12" :xl="6" :xs="24" class="target-month-warp">
        <TargetMonth/>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, provide } from 'vue';
import Overview from './components/overview.vue';
import RecentSituation from './components/recent-situation.vue';
import OnlineAccess from './components/online-access.vue';
import ActiveUser from './components/active-user.vue';
import CategoryRatio from './components/category-ratio.vue';
import FeedbackData from './components/feedback-data.vue';
import TargetMonth from './components/target-month.vue';
import '@/utils/echarts';
import { useDark } from '@vueuse/core';
import { THEME_KEY } from 'vue-echarts';

const isDark = useDark();
const echartTheme = computed(() => (isDark.value ? 'dark' : ''));
provide(THEME_KEY, echartTheme);
defineOptions({
  name: 'Monitor', // 不命名组件，keep-alive的include不属性生效
});
</script>

<style lang="scss" scoped>
.recent-situation-warp {
  margin-bottom: 14px;
  height: 460px;
}

.online-access-warp {
  height: 223px;
  margin-bottom: 14px;
}

.active-user-warp {
  height: 223px;
}

.category-ratio-warp,
.feedback-data-warp,
.target-month-warp {
  height: 230px;
  margin-bottom: 14px;
}
</style>
